<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>18_事件-绑定事件的修饰符</title>
  <!-- 
  在 Vue 中，事件修饰符用于简化事件处理的逻辑，使得开发者可以更方便地控制事件的行为。
  1. 什么是事件修饰符？

  事件修饰符是用来在事件绑定时添加特定行为的简写。它们可以帮助开发者更清晰地表达意图，避免在事件处理函数中手动编写额外的逻辑。

  2. 常用的事件修饰符
   2.1  `.stop` 
  - 功能：调用  `event.stopPropagation()` ，阻止事件冒泡。
  - 示例：
  <button @click.stop="handleClick">点击我</button>
   2.2  `.prevent` 
  - 功能：调用  `event.preventDefault()` ，阻止默认行为。
  - 示例：
  <form @submit.prevent="handleSubmit">
    <button type="submit">提交</button>
  </form>
   2.3  `.capture` 
  - 功能：在捕获阶段触发事件，而不是在冒泡阶段。
  - 示例：
  <div @click.capture="handleClick">点击我</div>
   2.4  `.self` 

  - 功能：仅当事件在事件目标自身上触发时才处理事件。
  - 示例：
  <div @click.self="handleClick">点击我</div>
   2.5  `.once` 
  - 功能：事件只会被触发一次。
  - 示例：
  <button @click.once="handleClick">点击我</button>
   2.6  `.passive` 
  - 功能：将事件标记为被动，表示不会调用  `preventDefault()` ，有助于提高性能。
  - 示例：
  <div @scroll.passive="handleScroll">滚动我</div>
  3. 组合使用
  事件修饰符可以组合使用，以实现更复杂的事件处理逻辑。例如：
  <button @click.stop.prevent="handleClick">点击我</button>
  在这个例子中，点击按钮会同时阻止事件冒泡和默认行为。

  4. 总结
  - 事件修饰符：用于简化事件处理逻辑，添加特定行为。
  - 常用修饰符：包括  `.stop` 、 `.prevent` 、 `.capture` 、 `.self` 、 `.once`  和  `.passive` 。
  - 组合使用：可以将多个修饰符组合在一起，以实现更复杂的功能。
  -->
  <style>
    .box {
      width: 100px;
      height: 200px;
      background-color: orange;
    }
  </style>
</head>
<body>

  <div id="app">
    <div class="box" @click="handleClick">
      点击我
      <button @click.stop="handleStopClick">点击我stop阻止事件冒泡</button>
    </div>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const handleClick = () => {
          console.log("点击了div")
        }

        const handleStopClick = () => {
          console.log("点击了button")
        }

        return {
          handleClick,
          handleStopClick
        }
      }
    }).mount('#app')

  </script>
  
</body>
</html>